<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../dist/css/car.css">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui-v2.5.4/layui/css/layui.css" media="all">
    <style>
        .xiangqing {
            /* background: wheat; */
            height: 360px;
            overflow-y: scroll;
            padding: 20px;
            border-bottom: 1px solid rgba(128, 128, 128, 0.459);
        }

        #test1 {
            margin-left: 20%;

        }

        #boxIMG {
            margin-left: 20%;

        }

        .jiage {
            padding: 18px;
            margin-left: 43%
        }

        .bianhao {
            font-size: 17px;
            padding: 18px;
            height: 120px;
            background: rgba(128, 128, 128, 0.151)
        }

        .canshu {
            padding: 20px;
        }

        .dizhi {
            overflow: hidden;
            height: 70px;
            border-bottom: 10px solid rgba(128, 128, 128, 0.322);
        }

        .dizhi div {
            float: left;
        }

        .shou {
            margin-top: 10px;
        }

        .name {
            padding: 20px;
            margin-top: -12px;
        }

        .youTubiao {
            width: 20px;
            height: 20px;
            margin-left: 650px;
            margin-top: 14px;
        }

        .shangXinxi {
            overflow: hidden;
            border-bottom: 10px solid rgba(128, 128, 128, 0.322);
        }

        .shangXinxi div {
            float: left;
            height: 140px;
            padding: 20px;
        }

        .shangXinxi div p {
            padding: 8px;
        }

        .xiangPic img {
            height: 110px;
            width: 110px;
        }

        .kuaidi {
            overflow: hidden;
            border-bottom: 10px solid rgba(128, 128, 128, 0.322);
        }

        .kuaidi div {
            float: left;
            padding: 20px;

        }

        .kuaidi .secend {
            width: 900px;
        }

        .kuaidi div p {
            padding: 8px;

        }

        .you {
            float: right;
        }

        .you1 {
            float: right;
        }

        .zhifu {
            border-bottom: 50px solid rgba(128, 128, 128, 0.322);
            padding: 20px;
        }

        .zhifubao {
            margin-left: 980px;
        }

        .yingfu {
            margin-left: 950px;
        }

        .goFK {
            margin-left: 500px;
            margin-top: 5px;

        }
    </style>
</head>

<body>
    <div class="carXin">
        <!-- 导航 -->
        <div class="dao">
            <span><img src="./pic/logo.png" alt=""></span>
            <a href="index.html">首页</a>
            <a href="wangShang.html">网络商城</a>
            <a href="">店铺信息</a>
            <a href="shenghuo.html">生活良品研究所</a>
            <a href="ziXun.html">问题咨询</a>
            <a href="">人才招聘</a>
            <a href="hezuo.html">店铺合作伙伴</a>
            <a href="">企业情报</a>
            <a href="">何为无印良品</a>
        </div>
        <!-- 购物车板块 -->
        <div class="spCar">
            <!-- 固定头部 -->
            <div class="toubu">
                <span class="oa"><img style="width: 30px;height:30px" src="./pic/fanhui.png" alt=""></span>
                <span class="ob"> 订单结算</span>
            </div>
        </div>
        <!-- 收货地址 -->
        <div class="xiangqing">
            <div class="dizhi">
                <div>
                    <h3 class="shou">收货地址</h3>
                </div>
                <div class="name">
                    <p><span>童欣欣</span><span>13523328173</span></p>
                    <p>湖北省 武汉市 江夏区 金融港北青年公寓</p>
                </div>
                <div> <img class='youTubiao' src="./pic/xiangyou.png" alt=""></div>
            </div>
            <!-- 商品图片详情 -->

            <div class="shangXinxi">
                <div class="xiangPic"><img src="./pic/4550002732318_400.jpg" alt=""></div>
                <div>
                    <p>印度棉天竺编织_圆领短袖T恤</p>
                    <p>颜色：深海军蓝、尺码：男式_S</p>
                    <p>
                        <h3>￥58</h3><span></span>
                    </p>
                </div>
            </div>

            <div class="kuaidi">
                <div>
                    <h3 class="shou">配送方式</h3>
                </div>
                <div class="secend">
                    <p><span>快递</span><span class="you">根据收货地区自动分配</span></p>
                    <p><span>运费</span><span class="you1">￥11</span></p>
                </div>
            </div>
            <div class="zhifu">

                <span>
                    <h3>支付方式</h3>
                </span><span class="zhifubao">支付宝</span>
            </div>
        </div>


        <!-- 结尾结算按钮 -->
        <div class="qian">
            <span>1 <span>件商品</span></span>
            <span class="yingfu">应付：<span style="color: rgba(255, 0, 0, 0.74);font-size: 22px">￥169</span></span>
        </div>
        <div class="fuK" style="width: 100%;height:40px ;background:#7f0019;border-radius:20px;" class="jsBtn">
            <h3 class="goFK" style="color: white">去付款</h3>
        </div>
    </div>

</body>
<script src="../jquery-1.11.3.js"></script>
<script src="../layui-v2.5.4/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;
        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
            , interval: 5000
        });
    });
</script>

</html>